<!-- 文章编辑页 -->
<template>
  <div class="article_edit">
    <!-- 标题 -->
    <div style="overflow: hidden;">
      <h2 class="title"> {{isId ? '编辑' : '添加'}}文章</h2>
    </div>
    <!-- 表单 -->
    <el-form :model="form" label-position="left" >
      <el-form-item v-for="(item, index) in formItem" :key="index" :label="item.label">
        <el-row>
          <el-col :span="colSpan[item.span]">
            <el-input v-model="form[item.value]" :placeholder="item.placeholder" clearable></el-input>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item label="封面">
        <upload @uploadUrl="uploadUrl" index="1" :icon="articleImg" />
      </el-form-item>
      <el-form-item label="内容"></el-form-item>
    </el-form>
    <!-- 编辑器 -->
    <editor @editorData="editorData" :editorContent="form.content" />
    <!-- 按钮 -->
    <div class="submit">
      <el-button type="primary" @click="onSubmit">确定</el-button>
      <el-button @click="cancel">取消</el-button>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, computed } from "vue";
import { useRouter } from 'vue-router';
import editor from '../../components/Editor.vue';
import axios from '../../http/axios';
import { ElMessage } from 'element-plus';
import upload from '../../components/Upload.vue';

export default defineComponent({
  name: 'ArticleEdit',
  props: ['id'],
  components: { editor, upload },
  setup (props) {
    const data = reactive({
      // 初始化 路由
      router: useRouter(),

      // 监听 id 的变化
      isId: computed(() => {
        return props.id ? true : false;
      }),

      // 循环控件数据
      formItem: [
        { label: '标题', span:'1', value: 'title',  placeholder: '文章标题' },
        { label: '作者', span:'0', value: 'up', placeholder: '作者名称' },
        { label: '类型', span:'0', value: 'category', placeholder: '文章的类型' },
      ],

      // input 的 col 宽度
      colSpan: [5, 10, 15, 20],

      // 表单数据 
      form: {
        title: '',
        up: '',
        category: '',
        content: '',
        cover: ''
      },

      // 编辑时，存储文章的封面图片的url
      articleImg: '',
    })

    // 页面挂载还没有挂载之前，获得数据
    props.id && getSlide();

    // 接收 编辑器 传递过来的值
    function editorData (editor: any) {
      // 进行赋值，把 编辑器 的内容，添加到 表单数据 中
      data.form.content = editor;
    }

    // 编辑时，获取 文章数据
    async function getSlide () {
      const { data: artcleData } = await axios.get(`/articles/${props.id}`);
      if( artcleData.status == 200 ) {
         data.form = artcleData.data;
        //  给上传组件 传递 图片url
         data.articleImg = artcleData.data.cover;
        //  显示 编辑器
         ElMessage.success('获取成功');
      } else {
        ElMessage.error('获取失败');
      }
    }

    // 获取 上传组件 传递过来的图片url
    function uploadUrl ([url, index]: [string, string]) {
      index === '1' ? data.form.cover = url : '';
      console.log(data.form);
    }

    // 点击确定按钮时
    async function onSubmit () {
      let article = null;
      if (props.id) {
        // 修改
        article = await axios.put(`/articles/${props.id}`, data.form);
      } else {
        // 创建
        article = await axios.post('/articles', data.form);
      }
      ElMessage.success(article.data.success);
      data.router.push('/articles/list');
    }

    // 点击取消触发
    function cancel () {
      data.router.push('/articles/list');
    }

    const RefData = toRefs(data);
    return {
      ...RefData,
      onSubmit,
      editorData,
      cancel,
      uploadUrl
    }
  }
 })
</script>

<style lang="scss" scoped>
.article_edit {
  .submit {
    margin-top: 20px;
    .el-button {
      margin: 0 10px;
    }
  }
}
</style>